<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<div style="text-align: center">
    <h1>欢迎使用编织机后台管理系统 v1.0</h1>
    <br>
</div>
<script>


    new Vue({
        el:'#notice',
        data:{
            notices:[],
            page: 1,
            limit: 5
        },
        created(){
            axios.get("/notice/get?page=" + this.page + "&limit=" + this.limit).then(res => {
                this.notices = res.data.data;
            })
        },
        methods:{
            nextPage(){
                if(this.notices.length != 0){
                    this.page = this.page + 1
                }
                axios.get("/notice/get?page=" + this.page + "&limit=" + this.limit).then(res => {
                    if(this.notices.length == 0){
                        alert("已经没有更多的数据了")
                    }else {
                        this.notices = res.data.data;
                    }
                })
            },
            upPage(){
                if((this.page - 1) > 0){
                    this.page = this.page - 1
                }else {
                    alert("当前已是首页")
                    return
                }
                axios.get("/notice/get?page=" + this.page + "&limit=" + this.limit).then(res => {
                    this.notices = res.data.data;
                })
            }
        }
    })

    layui.use(['carousel', 'form','element'], function(){
        var carousel = layui.carousel
            ,form = layui.form,
        element = layui.element;
        //图片轮播
        carousel.render({
            elem: '#test10'
            ,width: '100%'
            ,height: '600px'
            ,interval: 5000
        });

        //事件
        carousel.on('change(test4)', function(res){
            console.log(res)
        });

        var $ = layui.$, active = {
            set: function(othis){
                var THIS = 'layui-bg-normal'
                    ,key = othis.data('key')
                    ,options = {};

                othis.css('background-color', '#5FB878').siblings().removeAttr('style');
                options[key] = othis.data('value');
                ins3.reload(options);
            }
        };

        //监听开关
        form.on('switch(autoplay)', function(){
            ins3.reload({
                autoplay: this.checked
            });
        });

        $('.demoSet').on('keyup', function(){
            var value = this.value
                ,options = {};
            if(!/^\d+$/.test(value)) return;

            options[this.name] = value;
            ins3.reload(options);
        });

        //其它示例
        $('.demoTest .layui-btn').on('click', function(){
            var othis = $(this), type = othis.data('type');
            active[type] ? active[type].call(this, othis) : '';
        });
    });
</script>
</body>
</html>
